<template>
	<cl-page>
		<view class="page-my">
			<view class="header">
				<view class="info">
					<!-- 头像 -->
					<view class="avatar" @tap="toSet">
						<cl-avatar :size="110" :src="user.info?.avatarUrl" />
					</view>
					<!-- 信息 -->
					<view class="base">
						<text class="name" @tap="toSet">{{ user.info?.nickName || "昵称" }}</text>
					</view>
					
				</view>

				<!-- 简介 -->
				<!-- <view class="desc"> 简介：我也写了一个cool-admin的开源项目 </view> -->
			</view>

			<view class="container">
				<cl-list :radius="16">
					<cl-list-item label="关于我们" @tap="router.push('/pages/user/about')">
					</cl-list-item>
					<cl-list-item label="用户协议" />
					<cl-list-item label="隐私政策" />
					<cl-list-item label="我的创作" @tap="router.push('/pages/user/projects')" />
				
				<!-- 	<cl-list-item label="软件升级" :arrow-icon="false" :border="false">
						<cl-loading :size="20" v-if="app.version.loading" />
				
						<template v-else>
							<cl-text
								:value="`新版本 v${app.version.num}`"
								color="red"
								v-if="app.version.isUpgrade"
							/>
							<cl-text value="已经是最新版本" v-else />
						</template>
					</cl-list-item> -->
				</cl-list>
				
				<cl-list :radius="16">
					<cl-list-item label="切换账号" @tap="router.push('/pages/user/login')" />
					<cl-list-item label="退出登录" :arrow-icon="false" @tap="user.logout()">
						<cl-icon :size="36" name="exit" />
					</cl-list-item>
				</cl-list>
			</view>
			
		</view>

		<tabbar />
	</cl-page>
</template>

<script lang="ts" setup>
import { onPullDownRefresh, onShow,onReady,onShareAppMessage } from "@dcloudio/uni-app";
import { useCool, useStore,useApp } from "/@/cool";
import Tabbar from "./components/tabbar.vue";
import { useUi } from "/@/ui";

const app = useApp();
const { router } = useCool();
const { user } = useStore();
const ui = useUi();

async function refresh() {
	if (user.token) {
		await user.get();
	} else {
		user.logout();
	}
}

function toDev() {
	ui.showToast("开发中");
}

function toSet() {
	router.push("/pages/user/set");
}

onPullDownRefresh(async () => {
	await refresh();
	uni.stopPullDownRefresh();
});
onReady(() => {
	app.version.check();
});
onShow(() => {
	
	refresh();
});
onShareAppMessage(()=>{
	return {
		path:"/pages/index/home",
		title:"闯堂兔",
		imageUrl:"/static/share.jpg"
	}
})
</script>

<style lang="scss" scoped>
.page-my {
	.header {
		padding: 30rpx 30rpx 40rpx 30rpx;
		background-color: #fff;

		.info {
			display: flex;
			align-items: center;
			position: relative;
			// justify-content: space-between;
			.name {
				display: block;
				font-size: 50rpx;
				font-weight: bold;
				margin-left:20rpx;
				flex:1;
				overflow: hidden;
				display:-webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			.level {
				display: inline-block;
				font-size: 24rpx;
				border: 2rpx solid currentColor;
				border-radius: 8rpx;
				padding: 0 6rpx;
				margin: 10rpx 0 0 0;
				color: $cl-color-primary;
			}

			.avatar {
				border: 6rpx solid #f7f7f7;
				border-radius: 100%;
				// position: absolute;
				// top: 0;
				// right: 0;
				height: 110rpx;
				width: 110rpx;
			}
		}

		// .desc {
		// 	color: #999;
		// 	font-size: 24rpx;
		// 	margin-top: 20rpx;
		// }
	}

	.container {
		padding: 20rpx 24rpx;
	}
}
</style>
